import React from 'react';
import './Footer.css';

function Footer({ todos, clearCompleted }) {
  const completedCount = todos.filter(todo => todo.completed).length;
  const totalCount = todos.length;
  
  return (
    <div className="footer">
      <div className="todo-count">
        已完成 {completedCount} / 全部 {totalCount}
      </div>
      {completedCount > 0 && (
        <button 
          className="clear-completed" 
          onClick={clearCompleted}
        >
          清除已完成任务
        </button>
      )}
    </div>
  );
}

export default Footer;